<template>
  <div class="container-box">
    <!-- 远程控制对话框 -->
    <el-dialog
      width="400px"
      :title="dTitle"
      :visible.sync="dVisible"
      append-to-body
      @close="closeDialog" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单表注册" name="single">
          <el-form ref="registerform" :model="registerform" :rules="rules" :inline="true" label-width="100px">
            <el-form-item label="IMEI" prop="imei">
              <el-input v-model="registerform.imei" placeholder="请输入IMEI" />
            </el-form-item>

            <el-form-item label="注册平台" prop="signPlatform">
              <el-select v-model="registerform.signPlatform" placeholder="请选择注册平台" style="width: 202px;">
                <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                           :value="parseInt(dict.value)" ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="IMSI" prop="imsi">
              <el-input v-model="registerform.imsi" placeholder="当注册平台为OneNET时填写" />
            </el-form-item>

          </el-form>
          <el-row>
            <el-alert
              :title="alert.alertContent"
              :type="alert.alertType"
              v-if="alert.alertContent != null && alert.alertContent != ''"
              :closable="false">
            </el-alert>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="批量导入" name="multiple">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!-- <div class="el-upload__tip text-center" slot="tip">
              <div class="el-upload__tip" slot="tip">
                <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
              </div>
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
            </div> -->
          </el-upload>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="register">注册</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { registerSingle } from "@/api/record/terminalxb";
export default {
  name: 'RegisterDialog',
  emits: ['isClose'],
  dicts: ['sign_platform'],
  props: ['dialogVisible', 'dialogTitle'],
  data(){
    return {
      // 显示/隐藏
      dVisible: false,
      // 弹出框名称
      dTitle: 'NB平台注册',
      // tab标签页title
      activeName: 'single',
      rules: {
        IMEI: [
          { required: true, message: "IMEI不能为空", trigger: "blur" }
        ],
        signPlatform: [
          {required: true, message: "注册平台不能为空", trigger: "blur"}
        ]
      },
      registerform: {
        IMEI: '',
        signPlatform:'',
        IMSI:''
      },
      // 导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/basedata/terminalxb/importDeviceInAep"
      },
      alert: {
        alertContent: null,
        alertType: 'success'
      }
    }
  },
  watch:{
    dialogVisible(){
      this.dVisible = this.dialogVisible
    },
    dialogTitle(){
      this.dTitle = this.dialogTitle
    },
    // dialogForm(){
    //   this.registerform = this.dialogForm
    // }
  },
  methods: {
    closeDialog(){
      this.$emit('isClose', true)
      this.registerform.IMEI = ''
      this.$refs.registerform.resetFields()
    },
    handleClick(tab, event) {
      this.activeName = tab.name
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      // this.getList();
      this.$emit('getList')
    },
    // 提交上传文件
    register() {
      debugger
      if(this.activeName =='multiple'){
        this.$refs.upload.submit();
      }else if(this.activeName =='single'){
        debugger
        this.$refs["registerform"].validate(valid => {
          if(valid){
            registerSingle(this.registerform).then((response) =>{
              this.alert.alertContent = response.msg
              if(response.code == 200){
                this.alert.alertType = 'success'
              }
            })
          }
        })
      }
    },
  }
}
</script>
<style scoped lang="scss">
//弹出层的高度
::v-deep .el-dialog.import-dialog{
    min-height: 40vh !important;
    overflow: auto;
  }
  //弹出层里内容的高度
  ::v-deep .el-dialog__body{
    min-height: 30vh !important;
    overflow: auto;
  }
</style>
